<template>
  <div class="w-100 h-100 p-4 border-box bg-deep color-white flex-item font3">
    <div class="flex-label h-100 py-4 px-5 border-box bg-cover round-md">
      <el-tree :data="three_data" @node-click="handleNodeClick" node-key="id" :props="defaultProps" accordion />
    </div>
    <div class="flex-content ml-4 h-100 p-4 border-box bg-cover round-md color-white">

      <div style="margin: 10px 0px">
        <el-button type="primary" @click="addData()" :disabled="isdisabled"> <i
            class="el-icon-circle-plus-outline"></i>新增</el-button>
      </div>
      <el-table class="w-100 custom " :data="tableData" size="large" :height="height">
        <el-table-column prop="ID" label="ID" align="center"></el-table-column>
        <el-table-column prop="EQUIPMENT_NAME" label="设备名" align="center"></el-table-column>
        <el-table-column prop="EQUIPMENT_TYPE" label="设备类型" align="center"></el-table-column>
        <el-table-column prop="EQUIPMENT_LOCATION" label="设备位置" align="center"></el-table-column>
        <el-table-column prop="STATE" label="状态" align="center"></el-table-column>
        <el-table-column prop="MOBILITY" label="移动性" align="center"></el-table-column>
        <el-table-column prop="CARD_NUMBER" label="卡号" align="center"></el-table-column>
        <el-table-column prop="VOLTAGE" label="电压" align="center"></el-table-column>
        <!-- <el-table-column prop="CONDUCTANCE" label="电导" align="center"></el-table-column> -->
        <el-table-column prop="CREATE_TIME" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="UPDATE_TIME" label="修改时间" align="center"></el-table-column>
        <el-table-column prop="CONFIG" label="配置" align="center"></el-table-column>
        <el-table-column prop="UANDL" label="上下限" align="center"></el-table-column>
        <el-table-column prop="INTRODUCE" label="简介" align="center"></el-table-column>
        <el-table-column prop="BACILITIES_id" label="所属设施" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editData(scope.row)">编辑</el-button>
            <el-button type="warning" icon="el-icon-delete" @click="DeleteData(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog class="" :title="title" center :visible.sync='ChangeData' :before-close='outClose' append-to-body>
        <!-- 修改和编辑 -->
        <el-form :model='formData' label-width='80px'>
          <el-row>
            <el-col :span="8">
              <el-form-item label='设备类型'>
                <el-select placeholder="设备类型" v-model='formData.EQUIPMENT_TYPE'>
                  <el-option value='水质检测' label="水质检测"></el-option>
                  <el-option value='气象检测' label="气象检测"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label='设备名'>
                <el-input v-model='formData.EQUIPMENT_NAME'></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-form-item label='设备名'>
            <el-select v-model="formData.EQUIPMENT_NAME" multiple filterable allow-create default-first-option placeholder="请选择或输入设备名">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
            <el-col :span="8">
              <el-form-item label='设备号'>
                <el-input v-model='formData.ID' :disabled="canchange" style="width: 80%;"></el-input>

                <el-tooltip content="编号可以使用" placement="bottom" v-if="access">
                  <i class="el-icon-circle-check" style="color:blue;font-size:100%"></i>

                </el-tooltip>
                <el-tooltip content="编号已存在请重新填写" placement="bottom" v-if="exist">
                  <i class="el-icon-circle-close" style="color:red;font-size:100%"></i>
                </el-tooltip>


              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label='设备位置'>
                <el-input v-model='formData.EQUIPMENT_LOCATION'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label='状态'>
                <el-select placeholder="设备状态" v-model='formData.STATE'>
                  <el-option value='0' label="停止"></el-option>
                  <el-option value='1' label="正常"></el-option>
                </el-select>
                <!-- <el-input v-model='formData.STATE'></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label='移动性'>
                <el-select placeholder="移动性" v-model='formData.MOBILITY'>
                  <el-option value=0 label="不可移动"></el-option>
                  <el-option value=1 label="可移动"></el-option>
                </el-select>
                <!-- <el-input v-model='formData.MOBILITY'></el-input> -->
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label='卡号'>
                <el-input v-model='formData.CARD_NUMBER'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label='电压'>
                <el-input v-model='formData.VOLTAGE'></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label='电导'>
                <el-input v-model='formData.CONDUCTANCE'></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label='配置'>
                <el-input v-model='formData.CONFIG'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label='简介'>
            <el-input v-model='formData.INTRODUCE'></el-input>
          </el-form-item>
          <!-- <el-form-item label='所属设施'>
            <el-input v-model='formData.BACILITIES_id'></el-input>
          </el-form-item> -->
          <el-form-item label="所属设施">
            <el-select v-model="formData.BACILITIES_id" placeholder="请选择">
              <el-option v-for="item in BACILITIES" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label='上下限'>
            <!-- <el-input v-model='formData.UANDL'></el-input> -->
            <el-row>
              <el-col :span="12">
                <div class="sub-title">温度</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.te.co[0]"></el-input-number>~
                  <!-- :precision="2" 控制小数位数  :step="0.1" 步长 :max="10" 最大值-->
                  <el-input-number v-model="formData.UANDL1.te.co[1]"></el-input-number>
                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.te.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.te.th[1]"></el-input-number>
                </el-col>
              </el-col>
              <el-col :span="12" v-if="e_type==0">
                <div class="sub-title">溶氧</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.o2.co[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.o2.co[1]"></el-input-number>
                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.o2.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.o2.th[1]"></el-input-number>
                </el-col>
              </el-col>

              <el-col :span="12" v-if="e_type==1">
                <div class="sub-title">湿度</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.humidity.co[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.humidity.co[1]"></el-input-number>
                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.humidity.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.humidity.th[1]"></el-input-number>
                </el-col>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-if="e_type==0">
                <div class="sub-title">PH</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.ph.co[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.ph.co[1]"></el-input-number>
                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.ph.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.ph.th[1]"></el-input-number>
                </el-col>
              </el-col>
              <el-col :span="12" v-if="e_type==1">
                <div class="sub-title">气压</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.atm.co[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.atm.co[1]"></el-input-number>
                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.atm.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.atm.th[1]"></el-input-number>
                </el-col>
              </el-col>
              <el-col :span="12" v-if="e_type==0">
                <div class="sub-title">盐度</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.salt.co[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.salt.co[1]"></el-input-number>

                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.salt.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.salt.th[1]"></el-input-number>
                </el-col>
              </el-col>

              <el-col :span="12" v-if="e_type==1">
                <div class="sub-title">雨量</div>
                <el-col>
                  <div class="sub-title">co</div>
                  <el-input-number v-model="formData.UANDL1.rainfall.co[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.rainfall.co[1]"></el-input-number>

                </el-col>
                <el-col>
                  <div class="sub-title">th</div>
                  <el-input-number v-model="formData.UANDL1.rainfall.th[0]"></el-input-number>~
                  <el-input-number v-model="formData.UANDL1.rainfall.th[1]"></el-input-number>
                </el-col>
              </el-col>
            </el-row>
            <el-row v-if="e_type==0">
              <div class="sub-title">电导</div>
              <el-col :span="12">
                <div class="sub-title">co</div>
                <el-input-number v-model="formData.UANDL1.con.co[0]"></el-input-number>~
                <el-input-number v-model="formData.UANDL1.con.co[1]"></el-input-number>

              </el-col>
              <el-col :span="12">
                <div class="sub-title">th</div>
                <el-input-number v-model="formData.UANDL1.con.th[0]"></el-input-number>~
                <el-input-number v-model="formData.UANDL1.con.th[1]"></el-input-number>

              </el-col>
            </el-row>





          </el-form-item>
        </el-form>
        <span slot='footer'>
          <el-button type="primary" @click='saveData()'>保存</el-button>
          <el-button @click='outClose'>返回</el-button>
        </span>
      </el-dialog>
      <div class="text-right mt-4 pr-4">
        <el-pagination class="custom" background @size-change="onSizeChange" @current-change="onCurrentChange"
          :current-page="currentPage" :page-sizes="[20, 40, 80, 160]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseEquipment3, AddEquipment, DeleteEquipment, uniqueEID } from '@/request/api';
export default {
  name: 'deviceManage',
  data() {
    return {
      // options: [{
      //   value: '水质检测设备1',
      //   label: '水质检测设备1'
      // }, {
      //   value: '气象检测设备1',
      //   label: '气象检测设备1'
      // }],
      // value: [],
      base_id:"",//选择的基地ID
      water_len: 0,//水质设备数量
      weather_len: 0,//气象设备数量
      BACILITIES: [],//设施列表
      isdisabled: true,//添加按钮是否可点击
      BACILITIES_id: '',//设施号
      EQUIPMENT_LOCATION: '',//设施坐标
      height: 0,
      e_type: 0,

      title: '模态框',//默认title
      ChangeData: false,//更改弹窗
      //       EQUIPMENT_NAME	varchar（32）		否	设备名
      // EQUIPMENT_TYPE	varchar（32）		否	设备类型
      // EQUIPMENT_LOCATION	varchar（30）		否	设备位置
      // STATE	tinyint(1)		否	状态
      // MOBILITY	tinyint(1)		否	移动性
      // CARD_NUMBER	Int(11)		否	卡号
      // VOLTAGE	decimal(8,2)		否	电压
      // CREATE_TIME	datatime（6）		否	创建时间
      // UPDATE_TIME	datatime（6）		否	修改时间
      // CONFIG	varchar（32）		是	配置
      // UANDL	varchar（64）		是	上下限
      // BACILITIES_id	Int（11）		否	外键：关联设施表
      formData: {base_id:"", ID: '', EQUIPMENT_NAME: '', EQUIPMENT_TYPE: '', EQUIPMENT_LOCATION: '', STATE: '', MOBILITY: '', CARD_NUMBER: '', VOLTAGE: '', CREATE_TIME: '', UPDATE_TIME: '', CONFIG: '', UANDL1: { te: { co: [0, 0], th: [0, 0] }, o2: { co: [0, 0], th: [0, 0] }, ph: { co: [0, 0], th: [0, 0] }, salt: { co: [0, 0], th: [0, 0] }, con: { co: [0, 0], th: [0, 0] }, humidity: { co: [0, 0], th: [0, 0] }, atm: { co: [0, 0], th: [0, 0] }, rainfall: { co: [0, 0], th: [0, 0] } }, INTRODUCE: '', BACILITIES_id: '' },//字段
      three_data: [],//级联数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: [],//数据
      canchange: true,//是否能够改变数据
      access: false,//id可以使用
      exist: false,//id不可以使用
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = document.body.clientHeight - 330;
    })
    this.get_data()
    window.vue = this
  },
  created() {
    // this.get_data()
  },
  watch: {
    'formData.EQUIPMENT_TYPE': {
      handler: function (val) {
        if (val && this.formData.type == 'add') {
          // if (val=='')
          this.formData.EQUIPMENT_NAME = val + '设备'
        }
        if (val == '气象检测') {
          // 气象：te温度，humidity湿度，atm气压，rainfall雨量
          // this.formData.UANDL1 ={ te: { co: [0, 0], th: [0, 0] }, humidity: { co: [0, 0], th: [0, 0] }, atm: { co: [0, 0], th: [0, 0] }, rainfall: { co: [0, 0], th: [0, 0] } }
          this.e_type = 1
          this.formData.EQUIPMENT_NAME = this.formData.EQUIPMENT_NAME + (this.weather_len + 1)
        }
        if (val == '水质检测') {
          this.e_type = 0
          this.formData.EQUIPMENT_NAME = this.formData.EQUIPMENT_NAME + (this.water_len + 1)
          // this.formData.UANDL1={ te: { co: [0, 0], th: [0, 0] }, o2: { co: [0, 0], th: [0, 0] }, ph: { co: [0, 0], th: [0, 0] }, salt: { co: [0, 0], th: [0, 0] }, con: { co: [0, 0], th: [0, 0] } }
        }
      }
    },
    'formData.ID': {
      handler: function (val) {
        if (val && this.formData.type == 'add') {
          // if (val=='')
          uniqueEID({
            ID: val
          }).then(res => {
            if (res.code == 200) {
              this.access = true
              this.exist = false
            }
            else {
              this.exist = true
              this.access = false
            }
          })
        }

      }
    }

  },
  
  methods: {
    // 页展示数量改变
    onSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getList();
    },
    // 页码改变
    onCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getList();
    },
    get_children(data) {
      var arr = []
      if (data.children) {
        data.children.forEach(item => {
          var a = this.get_children(item)
          a.forEach(i => {
            arr.push(i)
          })
        })
      } else {
        arr.push(data)
      }


      return arr

    },
    handleNodeClick(data) {//级联点击事件
      // console.log(data)
      this.arrs = []
      var children = []
      // console.log(data)
      if (data.type != 'BASE') {
        this.BACILITIES_id = data.BACILITIES_id
        this.EQUIPMENT_LOCATION = data.EQUIPMENT_LOCATION
        this.isdisabled = false
        
        // if(data.type=='BACILITIES'){
        //   this.water_len=data.water_len
        //   this.weather_len=data.weather_len
        // }
      } else {
        this.base_id=data.id
        this.isdisabled = true
        this.BACILITIES_id = ''
        this.EQUIPMENT_LOCATION = ''
        this.water_len = data.water_len
        this.weather_len = data.weather_len
      }
      children = this.get_children(data)

      this.tableData = children


    },
    show_message(message, type) {
      this.$message({
        message: message,
        type: type
      });
    },
    outClose(done) {
      // this.$confirm('确认关闭', '提示框').then(() => {
      //   done()
      // }).catch(() => {

      // })
      // this.formData.UANDL=JSON.stringify(this.formData.UANDL)
      this.ChangeData = false
      this.formData = {base_id:"", ID: '', EQUIPMENT_NAME: '', EQUIPMENT_TYPE: '', EQUIPMENT_LOCATION: '', STATE: '', MOBILITY: '', CARD_NUMBER: '', VOLTAGE: '', CREATE_TIME: '', UPDATE_TIME: '', CONFIG: '', UANDL1: { te: { co: [0, 0], th: [0, 0] }, o2: { co: [0, 0], th: [0, 0] }, ph: { co: [0, 0], th: [0, 0] }, salt: { co: [0, 0], th: [0, 0] }, con: { co: [0, 0], th: [0, 0] }, humidity: { co: [0, 0], th: [0, 0] }, atm: { co: [0, 0], th: [0, 0] }, rainfall: { co: [0, 0], th: [0, 0] } }, BACILITIES_id: '' }
      //字段
      this.exist = false
      this.access = false

    },
    // 编辑数据
    editData(row) {
      this.ChangeData = true
      this.title = '编辑数据'
      console.log(row)
      this.formData = row
      this.formData.type = 'update'
      this.formData.UANDL1 = JSON.parse(this.formData.UANDL)
      this.canchange = true
      // console.log(this.formData.UANDL)


    },
    // 添加数据
    addData() {
      this.ChangeData = true
      this.canchange = false
      this.title = '新增数据'
      this.formData = {base_id:"", ID: '', EQUIPMENT_NAME: '', EQUIPMENT_TYPE: '', EQUIPMENT_LOCATION: '', STATE: '', MOBILITY: '', CARD_NUMBER: '', VOLTAGE: '', CREATE_TIME: '', UPDATE_TIME: '', CONFIG: '', UANDL1: { te: { co: [0, 0], th: [0, 0] }, o2: { co: [0, 0], th: [0, 0] }, ph: { co: [0, 0], th: [0, 0] }, salt: { co: [0, 0], th: [0, 0] }, con: { co: [0, 0], th: [0, 0] }, humidity: { co: [0, 0], th: [0, 0] }, atm: { co: [0, 0], th: [0, 0] }, rainfall: { co: [0, 0], th: [0, 0] } }, INTRODUCE: '', BACILITIES_id: '' },//字段

      this.formData.type = 'add'
      this.formData.BACILITIES_id = this.BACILITIES_id
      this.formData.EQUIPMENT_LOCATION = this.EQUIPMENT_LOCATION
      //  = { type: 'add', BACILITIES_id: this.BACILITIES_id, EQUIPMENT_LOCATION: this.EQUIPMENT_LOCATION, INTRODUCE: '', UANDL: { te: { co: '', th: '' }, o2: { co: '', th: '' }, ph: { co: '', th: '' }, salt: { co: '', th: '' } }, CONFIG: '' }

    },
    // 保存数据
    saveData() {
      this.ChangeData = false
      this.canchange = true
      this.exist = false
      this.access = false
      // this.formData.type='add'
      // this.formData.UANDL = JSON.stringify(this.formData.UANDL)
      // JSON.stringify(json对象) 
      var UANDL = this.formData.UANDL1
      var save_UANDL = {}
      save_UANDL.te = UANDL.te
      // { te: { co: [0, 0], th: [0, 0] }, o2: { co: [0, 0], th: [0, 0] }, ph: { co: [0, 0], th: [0, 0] }, salt: { co: [0, 0], th: [0, 0] }, con: { co: [0, 0], th: [0, 0] }, humidity: { co: [0, 0], th: [0, 0] }, atm: { co: [0, 0], th: [0, 0] }, rainfall: { co: [0, 0], th: [0, 0] }  }
      this.formData.base_id=this.base_id
      // console.log(this.formData)
      if (this.formData.EQUIPMENT_TYPE == '气象检测') {

        save_UANDL.humidity = UANDL.humidity
        save_UANDL.atm = UANDL.atm
        save_UANDL.rainfall = UANDL.rainfall
      }

      if (this.formData.EQUIPMENT_TYPE == '水质检测') {
        save_UANDL.ph = UANDL.ph
        save_UANDL.salt = UANDL.salt
        save_UANDL.o2 = UANDL.o2
        save_UANDL.con = UANDL.con


      }
      // if (this.formData.INTRODUCE)
      this.formData.UANDL1 = JSON.stringify(save_UANDL)
      this.formData.UANDL = JSON.stringify(save_UANDL)

      var type = this.formData.type
      if (type == 'add') {
        type = '添加'
      }
      if (type == 'update') {
        type = '修改'
      }

      AddEquipment({
        form: this.formData

      }).then(res => {
        if (res.code=='200') {
          this.show_message(type + '成功', 'success')
          this.ChangeData = false
          
          if (type == '添加') { 
            this.tableData.push(res.data) 
            if (this.formData.EQUIPMENT_TYPE=='气象检测'){
              this.weather_len=this.weather_len+1
            }
            if (this.formData.EQUIPMENT_TYPE=='水质检测'){
              this.water_len=this.water_len+1
            }
          }
          this.outClose()

        } else {
          this.show_message(type + '失败' + res.result, 'warning')
        }

      }).catch(err => {
        
        // console.log(1)
        this.show_message(type + '失败' + '请检查填写数据', 'warning')
        // this.addData()
        this.outClose()
        
      })
      // this.ChangeData = false


    },
    //删除数据
    DeleteData(row) {
      this.$confirm('确认删除', '提示框').then(() => {
        // console.log(row)
        let id1 = this.tableData.findIndex(item => {
          if (item.id == row.id) {
            return true
          }
        })

        DeleteEquipment({
          ID: row.ID,
          base_id:this.base_id
        }).then(
          res => {
            if (res.status) {
              this.show_message('删除成功', 'success')
              this.tableData.splice(id1, 1)
              if (row.EQUIPMENT_TYPE=='水质检测')
              this.water_len=this.water_len-1
              else
              this.weather_len=this.weather_len-1
            }
            else {
              this.show_message('删除失败', 'warning')
            }

          }
        ).catch(err => {
          this.show_message('删除失败' + err, 'warning')
        })
        // 显示成功的操作
      }).catch(err => {
        this.show_message('取消删除', 'warning')
      })
    },






    get_data() { // 获取三级列表
    // 从 URL 中获取 base_id 参数
    const base_id = this.$route.query.base_id; // 使用 Vue Router 的 $route.query 获取参数
    console.log('base_id from URL:', base_id); // 打印 base_id 确认是否正确获取

    // 调用接口时传递 base_id
    getBaseEquipment3({
      base_id: base_id // 将 base_id 传递给后端
    }).then(res => {
      this.three_data = res.data;
      this.BACILITIES = res.BACILITIES;
    }).catch(error => {
      console.error('获取数据失败:', error);
    });
  }

  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/variable.less';

/deep/ .el-tree {
  background: transparent;
  color: @colorWhite;
}
</style>